<template>
  <el-dialog width="60%" title="分配角色" 
  :visible.sync="distributeUserDialogVisible"
  >
    <template>
      <p>当前的用户:{{userInfo.username}}</p>
      <p>当前的角色:{{userInfo.role_name}}</p>

      <!-- 下拉菜单 -->
      <div class="selectRight">
        <span>分配新角色:</span>
          <el-select v-model="setNowUserUpdateRole" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id">   <!-- 最后选中的id会双向绑定到v-model上,进行id的网络请求 -->
            </el-option>
          </el-select>
      </div>
      

      <!-- 按钮区域 -->
      <span slot="footer">
        <el-button @click="distributeUserDialogVisible = false">取 消</el-button>
        <el-button 
          type="primary" 
          @click="putUserRoleRequest"
        >确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// 网路请求
import { getAllRole, putUserRole } from '@/network/homeRequest';

export default {
  data() {
    return {
      distributeUserDialogVisible: false,
      userInfo: {}, // 用户数据
      roleList: [], // 角色列表
      setNowUserUpdateRole: '', // 保存选中的id, 默认为false方便判断是否选中
    }
  },
  methods: {
    async openDistributeUseDialog(userInfo) {
      await this.getAllUserRight(); // 获取所有角色列表
      this.userInfo = userInfo;
      this.distributeUserDialogVisible = true;
    },
    async getAllUserRight() { // 获取所有角色列表
      const { meta, data } = await getAllRole();
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      return this.roleList = data;
    },
    async putUserRoleRequest() { // 发送分配角色用户事件
      // console.log(this.userInfo.id);
      // console.log(this.setNowUserUpdateRole);  
      const { meta } = await putUserRole(this.userInfo.id, this.setNowUserUpdateRole);
      if (meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }
      this.$bus.$emit('getUserList'); // 刷新数据
      this.$message.success(meta.msg);
      this.distributeUserDialogVisible = false;
      return this.setNowUserUpdateRole = ''; // 重置，避免第二次打开出现上次的数据
    }
  },
  created() {
    this.$bus.$on('distributeUserDialog', userInfo => this.openDistributeUseDialog(userInfo));
    
  },
  destroyed() {
    this.$bus.$off('distributeUserDialog');
  }
}
</script>

<style lang="scss" scoped>
  p{
    margin-left: 5%;
    text-align:left;  
    font-size: 16px;
    margin-bottom: 30px;
  }
  .selectRight {
    margin-left: 5%;
    span {
      margin-right: 10px;
    }
  }
</style>



